<script lang="ts" setup>
import type { RoleItem } from './role.data';

import { ref } from 'vue';

import { useVbenDrawer, useVbenModal } from '@vben/common-ui';

import { Delete, Plus } from '@element-plus/icons-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { useRequestRole } from '#/api/core/api';

import PermessionDrawer from './PermessionDrawer.vue';
import { formOptions, gridOptions } from './role.data';
import RoleModal from './RoleModal.vue';
import RoleUserDrawer from './RoleUserDrawer.vue';

// 响应式数据
const roleUserDrawerRef = ref();

const { useRequestHandle } = useRequestRole;
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
  formOptions,
  showSearchForm: true,
});
const [Modal, modalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: RoleModal,
});
// 新增角色
const handleAdd = () => {
  modalApi.setData({
    isUpdate: false,
    data: null,
  });
  modalApi.open();
};

// 编辑角色
const handleEdit = (row: RoleItem) => {
  modalApi.setData({
    isUpdate: true,
    data: row,
  });
  modalApi.open();
};

/**
 * 批量删除or删除角色
 * @param row 待删除的角色
 * @param batch 是否删除
 */
async function handleDelete(row: null | RoleItem, batch: false) {
  if (!batch) {
    await useRequestHandle.del(row.roleId, gridApi.reload);
  }
}

const openRoleUserDrawer = (row) => {
  roleUserDrawerRef.value?.openDrawer(row.roleId);
};
// 导入处理
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: PermessionDrawer,
});
function open(roleId: string) {
  if (roleId) {
    drawerApi.setData({
      isUpdate: false,
      roleId,
    });
  }
  drawerApi.open();
}
// gridApi.grid.getCheckboxRecords()
const selectedRows = ref([]);

// const disabled = computed(() => gridApiRef.value?.isAllCheckboxChecked());
</script>

<template>
  <div class="vp-raw w-full p-5">
    <Grid>
      <template #toolbar-actions>
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>新增角色
        </el-button>
        <el-button
          :disabled="selectedRows.length > 0"
          type="danger"
          @click="handleDelete(null, true)"
        >
          <el-icon><Delete /></el-icon>批量删除
          <span v-if="selectedRows.length > 0" class="selected-count">
            ({{ selectedRows.length }})
          </span>
        </el-button>
      </template>
      <template #action="{ row }">
        <el-button link type="primary" @click="openRoleUserDrawer(row)">
          用户
        </el-button>
        <el-button link type="success" @click="handleEdit(row)">
          修改
        </el-button>
        <el-button link type="danger" @click="handleDelete(row)">
          删除
        </el-button>
        <el-button link type="warning" @click="open(row.roleId)">
          授权
        </el-button>
      </template>
    </Grid>
    <!-- 角色用户   -->
    <RoleUserDrawer ref="roleUserDrawerRef" />
    <!-- 编辑角色   -->
    <Modal @success="gridApi.reload()" />
    <Drawer />
  </div>
</template>

<style lang="scss" scoped>
.vp-raw {
  padding: 20px;

  .selected-count {
    margin-left: 4px;
    font-size: 14px;
  }
}
</style>
